<template>
  <view class="parking-records-modal">
    <up-popup v-model:show="show" overlay mode="center" :round="10" closeable closeOnClickOverlay
      @close="close" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">停车记录</view>
        </view>
        <view class="records-list">
          <view class="record-item" v-for="(record, index) in recordsList" :key="index">
            <view class="record-info">
              <view class="parking-location">{{ record.parkingLocation }}</view>
              <view class="parking-time">
                <text>驶入时间：{{ record.startTime }}</text>
              </view>
              <view class="parking-time">
                <text>驶出时间：{{ record.endTime }}</text>
              </view>
              <view class="parking-fee">
                <text>订单金额：¥{{ record.fee }}</text>
              </view>
              <view class="payment-status">
                <text>支付状态：</text>
                <text :class="record.isPaid ? 'paid' : 'unpaid'">{{ record.isPaid ? '已支付' : '未支付' }}</text>
              </view>
            </view>
          </view>
          <view v-if="recordsList.length === 0" class="empty-tip">
            暂无停车记录
          </view>
        </view>
        <view class="modal-footer">
          <up-button type="primary" @click="close">关闭</up-button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, defineExpose } from 'vue';

defineOptions({ name: "ParkingRecordsModal" });

// 定义属性
const props = defineProps({
  recordsList: {
    type: Array,
    default: () => []
  }
});

// 定义事件
const emit = defineEmits(['update:show', 'close']);

// 创建响应式数据  
const show = defineModel<boolean>("show", { default: false });

// 打开弹窗
function open() {
  show.value = true;
}

// 关闭弹窗
function close() {
  show.value = false;
  emit('close');
}

// 暴露方法
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.parking-records-modal {
  .modal-content {
    width: 80vw;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    
    .modal-header {
      margin-bottom: 20px;
      
      .modal-title {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: #333;
      }
    }
    
    .records-list {
      max-height: 50vh;
      overflow-y: auto;
      
      .record-item {
        padding: 15px;
        border-bottom: 1px solid #eee;
        background-color: #f9f9f9;
        border-radius: 6px;
        margin-bottom: 10px;
        
        .record-info {
          .parking-location {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
          }
          
          .parking-time, .parking-fee, .payment-status {
            margin-bottom: 5px;
            font-size: 14px;
            color: #666;
          }
          
          .paid {
            color: #4caf50;
          }
          
          .unpaid {
            color: #f44336;
          }
        }
      }
      
      .empty-tip {
        text-align: center;
        padding: 20px;
        color: #999;
      }
    }
    
    .modal-footer {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>